import React, { memo } from 'react'
import { useRoutes } from 'react-router-dom'
import { shallowEqual, useSelector } from 'react-redux'
import routes from '@/router'
import AppHeader from './components/app-header'
import AppFooter from './components/app-footer'
import { useScrollTop } from './hooks'

const App = memo(() => {
  useScrollTop()

  const { headerConfig } = useSelector((state) => ({
    headerConfig: state.main.headerConfig
  }), shallowEqual)

	return (
    <div style={{position: 'relative'}}>
      <AppHeader headerConfig={headerConfig} />
      <div className="main">
        {
          useRoutes(routes)
        }
      </div>
      <AppFooter />
    </div>
  )
})

export default App
